<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Punoda looks</title>
        <style type="text/css">
            body {
                font-family: aerial, sans-serif;
            } .title {
                background-color: #000;
                color: #FFFFFF;
            }.loginpanel {
                position: absolute;
                width: 238px;
                font-family: arial;
                font-size: 0.9em;
                font-weight: bold;
            }.loginButton {
                color: #FFFFFF;
                background-color: #000;
                float: right;
                padding: 3px;
            }.titleName {
                float: left;
                color: #FFFFFF;
            }.lt {
                background-color: #CCCCCC;
            }.content{
            	padding: 2px;
            }.spc{position: absolute; width: 197px; height: 168; border: 1px solid #000; padding: 3px;}
        </style>
        <script type="text/javascript">
            function punoda(){
            
            }
            
            punoda.prototype = {
                init: function(){
                    this.setSizeWin($('mainContainer'));
					this.appendSplash();
					window.onresize = function(){
						_punodaAPI.centerElement($('splash'));
						_punodaAPI.setSizeWin($('mainContainer'))
					};
                },
                loginPanel: function(){
                    var lpanel = document.createElement('div');
                    lpanel.id = 'logpanel';
                    lpanel.className = 'loginpanel';
                    var table = document.createElement('table');
                    table.className = "lt";
                    table.cellSpacing = 0;
                    table.cellPadding = 3;
                    
                    var trow = table.insertRow(-1);
                    var row1cell1 = trow.insertCell(-1);
                    row1cell1.id = 'handler';
                    row1cell1.colSpan = 2;
                    row1cell1.className = 'title';
                    var titleName = document.createElement('div');
                    titleName.className = 'titleName';
                    var font = document.createElement('font');
                    font.size = 2;
                    font.style.cssText = 'font-weight: bold';
                    font.innerHTML = 'Punoda Login';
                    titleName.appendChild(font);
                    var closeButton = new Image();
                    closeButton.style.cssText = 'float: right';
                    closeButton.src = 'images/close.jpg';
                    closeButton.onclick = function(){
                        _punodaAPI.removeElById(lpanel.id);
                    };
                    row1cell1.appendChild(titleName);
                    row1cell1.appendChild(closeButton);
                    
                    var trow = table.insertRow(-1);
                    row2cell1 = trow.insertCell(-1);
                    row2cell1.innerHTML = 'Username';
                    row2cell2 = trow.insertCell(-1);
                    var inUsername = document.createElement('input');
                    inUsername.type = 'text';
                    inUsername.value = '';
                    row2cell2.appendChild(inUsername);
                    
                    var trow = table.insertRow(-1);
                    row3cell1 = trow.insertCell(-1);
                    row3cell1.innerHTML = 'Password';
                    row3cell2 = trow.insertCell(-1);
                    var inPassword = document.createElement('input');
                    inPassword.type = 'password';
                    inPassword.value = '';
                    row3cell2.appendChild(inPassword);
                    
                    var trow = table.insertRow(-1);
                    row4cell1 = trow.insertCell(-1);
                    row4cell1.colSpan = 2;
                    var loginButton = document.createElement('div');
                    loginButton.className = 'loginButton';
                    loginButton.onclick = function(){
                        login();
                    };
                    loginButton.innerHTML = 'Login'
                    row4cell1.appendChild(loginButton);
                    
                    lpanel.appendChild(table);
                    document.body.appendChild(lpanel);
                    
                    this.centerElement(lpanel);
                    new Draggable(lpanel, {
                        handle: $('handler')
                    });
                },
                staticLogin: function(){
                    var dat = '' +
                    '<div id="lpanel" class="loginpanel">' +
                    '<table cellpadding="3" cellspacing="0" width="100%" bgcolor="#cccccc">' +
                    '<tr><td id="handler" colspan="2" class="title"><div class="titleName">' +
                    '<font size="2"><b>Punoda Login</b><font/>' +
                    '</div><img src="images/close.jpg" style="float: right" onclick="closeLoginPanel();"/>' +
                    '</td></tr><tr><td>Username</td><td><input type="text" value=""></td></tr><tr>' +
                    '<td>Password</td><td><input type="password" value="" /></td></tr><tr><td colspan="2">' +
                    '<div class="loginButton" onclick="loginPanel();">Login</div></td></tr></table></div>';
                    document.body.innerHTML += dat;
                },
                /**
                 * Function to remove element by given id
                 *
                 * @param {Object} id
                 */
                removeElById: function(id){
                    var el = document.getElementById(id);
                    if (el != null) {
                        el.parentNode.removeChild(el); // or instead of this line, put removeEl(el)
                    }
                },
                innerSize: function(){
                    var myWidth = 0, myHeight = 0;
                    if (typeof(window.innerWidth) == 'number') {
                        //Non-IE
                        myWidth = window.innerWidth;
                        myHeight = window.innerHeight;
                    }
                    else 
                        if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                            //IE 6+ in 'standards compliant mode'
                            myWidth = document.documentElement.clientWidth;
                            myHeight = document.documentElement.clientHeight;
                        }
                        else 
                            if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                                //IE 4 compatible
                                myWidth = document.body.clientWidth;
                                myHeight = document.body.clientHeight;
                            }
                    var bSize = {
                        'X': myWidth,
                        'Y': myHeight
                    };
                    return bSize;
                },
                centerElement: function(element){
                    var windowCenterX = this.innerSize().X / 2;
                    var windowCenterY = this.innerSize().Y / 2;
                    
                    var elementCenterX = element.scrollWidth / 2;
                    var elementCenterY = element.scrollHeight / 2;
                    
                    element.style.top = (windowCenterY - elementCenterY) + 'px';
                    element.style.left = (windowCenterX - elementCenterX) + 'px';
                },
                setSizeWin: function(element){
                    element.style.width = (this.innerSize().X -8)+ 'px';
                    element.style.height = (this.innerSize().Y -8) + 'px';
                },
				appendSplash: function(){
					var spc = document.createElement('div');
					var center = document.createElement('center');
					spc.id = 'splash';
					spc.className = 'spc';
					var spImage = new Image();
					spImage.src = 'images/punodalogo.jpg';
					
					spImage.onreadystate = load(spc);
					
					function load(spc){
						var divcon = document.createElement('div');
						divcon.innerHTML = '<div><font size="4" style="color: #707070 "><b style="color:#000">Pu</b>blic <b style="color:#000">No</b>tice <b style="color:#000">Da</b>tabase</font>';
						center.appendChild(spImage);
						center.innerHTML += '<br/>';
						center.appendChild(divcon);
						spc.appendChild(center);
						document.body.appendChild(spc);
						alert(spc.scrollWidth+"<<<>>>"+spc.scrollHeight);
						_punodaAPI.centerElement(spc);
					}
				}
            }
            var _punodaAPI = new punoda();
        </script>
        <script type="text/javascript" src="lib/prototype/prototype.js">
        </script>
        <script type="text/javascript" src="lib/scriptaculous/scriptaculous.js">
        </script>
    </head>
    <body onload="_punodaAPI.init();">
        <div id="mainContainer" style="position: absolute; top: 0; left: 0; border:2px solid #000; margin: 2px;">
            <div class="title" style="float: left; width:100%">
                <div style="float: left">Construction Vault</div>
				<div style="float:right; font-size: 12px; font-weight: bold; cursor: pointer" onclick="_punodaAPI.loginPanel();">
                	login        
                </div>
            </div>
			<div class="content">
			</div>
        </div>
    </body>
</html>
